<template>
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">新建任务</span>
    <input
      type="text"
      class="form-control"
      aria-describedby="button-addon2"
      v-model="todoName"
    />
    <button class="btn btn-outline-primary" type="button" id="button-addon2" @click="addTodo">
      添加
    </button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            todoName:''
        }
    },
    emits:['addTodo'],
    methods:{
        addTodo(){
            this.$emit("addTodo",this.todoName)
        }
    }
};
</script>
<style scoped>
.input-group {
  width: 500px;
  margin: 50px auto;
}
</style>